<template>
  <!-- 这是点击搜索框后要会跳转页面的搜索头部 -->
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="搜索课程/文章"
      shape="round"
      @search="onSearch"
      @cancel="onCancel"
      @click-input="toSearch"
    />
  </form>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'SearchNav',
  data() {
    return {
      value: '',
    }
  },
  methods: {
    onSearch(val) {
      Toast(val)
    },
    onCancel() {
      Toast('取消')
    },
    toSearch() {
      this.$router.push({
        path: '/search',
      })
    },
  },
}
</script>

<style scoped></style>
